<template>
  <div class="tab-calendar">
    <schedule-statistics></schedule-statistics>
    <view-drop-down
      @handleChangeView="handleChangeView"
      :selectValue="value"
    ></view-drop-down>
    <schedule-table
      v-if="value === '1'"
      ref="scheduleTableRef"
    ></schedule-table>
    <calendar-view v-if="value === '2'" ref="calendarViewRef" source="calendar"></calendar-view>
  </div>
</template>
<script>
import { reactive, toRefs, ref, nextTick } from 'vue';

import ScheduleStatistics from './ScheduleStatistics.vue';
import ViewDropDown from './ViewDropDown.vue';
import ScheduleTable from './ScheduleTable.vue';
import CalendarView from './CalendarView.vue';

export default {
  name: 'tab-calendar',
  components: {
    ScheduleStatistics,
    ViewDropDown,
    ScheduleTable,
    CalendarView,
  },
  setup() {
    const scheduleTableRef = ref(null);
    const calendarViewRef = ref(null);

    const state = reactive({
      value: '2',
    });

    const handleChangeView = val => {
      state.value = val;
    };

    const renderCalendar = () => {
      nextTick(() => {
        state.value === '2' && calendarViewRef.value.resizeRender();
      })
    }

    return {
      ...toRefs(state),
      handleChangeView,
      scheduleTableRef,
      calendarViewRef,
      renderCalendar
    };
  },
};
</script>
<style lang="scss" scoped>
.tab-calendar {
  height: 100%;
  padding: 16px;
}
</style>